<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: #333;
			}
			#box{
				background: #ccc;
			}
		</style>
		<script>
			window.onload = function(){
				var oC1 = document.querySelector("#box");
				var oG1 = oC1.getContext('2d');
				var yImg = new Image();
				yImg.onload = function(){
					draw(this);
				};
				yImg.src = '02.jpg';
				function draw(obj){
					oC1.width = obj.width;
					oC1.height = obj.height*2;
					oG1.drawImage(obj,0,0);
					var oImg = oG1.getImageData(0,0,obj.width,obj.height);
					var w = oImg.width;
					var h = oImg.height;
					var newImg = oG1.createImageData(obj.width,obj.height);
					var stepW = w/10;
					var stepH = h/10;
					for(var i=0; i<stepH; i++){
						for( var j = 0; j<stepW; j++ ){
							var color = getXY(oImg,j*10+Math.floor(Math.random()*10),i*10+Math.floor(Math.random()*10));
							for( var k = 0;k<10; k++ ){
								for( var l = 0;l<10; l++ ){
									setXY(newImg,j*10+l,i*10+k,color);
								};
							};
						};
					};
					oG1.putImageData(newImg,0,obj.height);
					
				};
				function getXY(obj,x,y){
					var w = obj.width;
					var h = obj.height;
					var d = obj.data;
					var color = [];
					color[0] = d[4*(y*w+x)]
					color[1] = d[4*(y*w+x)+1]
					color[2] = d[4*(y*w+x)+2]
					color[3] = d[4*(y*w+x)+3]
					return color;
				};
				function setXY(obj,x,y,color){
					var w = obj.width;
					var h = obj.height;
					var d = obj.data;
					d[4*(y*w+x)] = color[0];
					d[4*(y*w+x)+1] = color[1]
					d[4*(y*w+x)+2] = color[2]
					d[4*(y*w+x)+3] = color[3]
					
				};
			}
		</script>
	</head>
	<body>
		<canvas id="box" width="500" height="800"></canvas>
	</body>
</html>
